<template>
  <el-container>
    <!-- 侧边栏 -->
    <el-aside width="200px" style="height: 98vh;">
      <NavMenu/>
    </el-aside>

    <!-- 右侧内容 -->
    <el-container>
      <el-header>
        <span>门诊预约系统</span>
        <!-- 用户信息 -->
        <div class="user-info">
          <el-dropdown trigger="click" @command="handleCommand">
            <span class="user-link">
              <el-avatar :src="user.avatar" style="vertical-align: middle; margin-right: 10px;"/>
              <span>
                <el-text type="primary">
                  {{ user.username }}
                  <el-icon class="el-icon--right"><arrow-down/></el-icon>
                </el-text>
              </span>

            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item>
                  <el-text type="primary" @click="handleCommand('view')">查看信息</el-text>
                </el-dropdown-item>
                <el-dropdown-item>
                  <el-text type="warning" @click="handleCommand('edit')">修改信息</el-text>
                </el-dropdown-item>
                <el-dropdown-item>
                  <el-text type="danger" @click="handleCommand('logout')">退出登录</el-text>
                </el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </el-header>

      <el-main>
        <router-view/>
      </el-main>
    </el-container>
  </el-container>

  <!-- 查看用户信息弹窗 -->
  <el-dialog title="用户信息" v-model="viewDialogVisible" width="30%">
    <el-descriptions :column="1" border>
      <el-descriptions-item label="用户ID">{{ user.adminId }}</el-descriptions-item>
      <el-descriptions-item label="用户名">{{ user.username }}</el-descriptions-item>
      <el-descriptions-item label="昵称">{{ user.nickname }}</el-descriptions-item>
      <el-descriptions-item label="邮箱">{{ user.email }}</el-descriptions-item>
      <el-descriptions-item label="电话">{{ user.phone }}</el-descriptions-item>
      <el-descriptions-item label="注册时间">{{ user.createTime }}</el-descriptions-item>
      <el-descriptions-item label="最后更新">{{ user.updateTime }}</el-descriptions-item>
    </el-descriptions>
  </el-dialog>

  <!-- 修改用户信息弹窗 -->
  <el-dialog title="修改信息" v-model="editDialogVisible" @close="resetForm">
    <el-form :model="editForm" :rules="rules" ref="editFormRef">
      <el-form-item label="邮箱" prop="email">
        <el-input v-model="editForm.email"/>
      </el-form-item>
      <el-form-item label="电话" prop="phone">
        <el-input v-model="editForm.phone"/>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="editDialogVisible = false">取消</el-button>
      <el-button type="primary" @click="saveUserInfo">保存</el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import {ref, reactive, computed, onMounted} from 'vue';
import {useRouter} from 'vue-router';
import {ElMessage} from 'element-plus';
import {getUser, setUser, clearAuth} from '@/utils/auth';
import NavMenu from "@/components/NavMenu.vue";
import {ArrowDown} from "@element-plus/icons-vue";

const router = useRouter();

// 用户信息
const user = computed(() => getUser());

// 控制弹窗
const viewDialogVisible = ref(false);
const editDialogVisible = ref(false);

// 修改表单
const editForm = reactive({
  email: user.value.email,
  phone: user.value.phone,
});
const editFormRef = ref(null);
const rules = {
  email: [
    {required: true, message: '请输入邮箱', trigger: 'blur'},
    {type: 'email', message: '邮箱格式错误', trigger: 'blur'},
  ],
  phone: [
    {required: true, message: '请输入电话', trigger: 'blur'},
    {pattern: /^1[3-9]\d{9}$/, message: '电话格式错误', trigger: 'blur'},
  ],
};

// 下拉菜单操作
const handleCommand = (command) => {
  if (command === 'view') {
    viewDialogVisible.value = true;
  } else if (command === 'edit') {
    editDialogVisible.value = true;
  } else if (command === 'logout') {
    clearAuth();
    router.push('/login');
  }
};

// 保存修改后的信息
const saveUserInfo = () => {
  editFormRef.value.validate(valid => {
    if (valid) {
      // 更新用户信息（模拟）
      const updatedUser = {...user.value, ...editForm};
      setUserInfo(updatedUser);
      ElMessage.success('信息更新成功');
      editDialogVisible.value = false;
    }
  });
};

// 重置表单
const resetForm = () => {
  editFormRef.value.resetFields();
};

// 工具函数：更新用户信息到localStorage
const setUserInfo = (newUser) => {
  setUser(newUser);
};

onMounted(() => {
  // 初始化用户信息（如果未登录则跳转）
  if (!user.value.username) {
    router.push('/login');
  }
});
</script>

<style>
.el-header {
  background-color: #b3c0d1;
  color: #333;
  text-align: center;
  line-height: 60px;

}

.user-info {
  margin-top: 12px;
  float: right;
}

.user-link {
  cursor: pointer;
  display: flex;
  align-items: center;
}
</style>
